<div class="pictures">
  <div ngf-drop="vm.uploadFiles($files)"
    class="drop-box"
    ngf-drag-over-class="'dragover'"
    ngf-multiple="true"
    ngf-pattern="'image/*'">
    <div class="existing-images">
      <span ng-repeat="pic in vm.item[vm.imagesKey]"
        ng-if="vm.item[vm.imagesKey].length"
        class="thumbnails"
        ng-class="{ 'deleted' : pic.deleted }">
        <img ng-src="{{ pic.thumbnail_url || pic.image_url }}"
             width="100"
             ng-model="pic"/>
        <small
          ng-click="pic.deleted = !pic.deleted">
          <span ng-show="pic.deleted">undo</span>
          delete
        </small>
      </span>
    <div class="button"
      ngf-select="vm.uploadFiles($files)"
      multiple="multiple">
      <span ng-if="vm.single">
        Choose file to upload
      </span>
      <span ng-if="!vm.single">
        Choose files to upload
      </span>
    </div>

    <div ng-show="uploading" class="progress primary round">
      <i class="fa fa-spinner fa-pulse"></i>
      Uploading {{ vm.numOfFiles }} file<span ng-if="vm.numOfFiles > 1">s</span>.
    </div>
  </div>
  <div ngf-no-file-drop>
    <div class="button"
      ngf-select="vm.uploadFiles($files)" multiple="multiple"
      >Choose files to upload
    </div>
  </div>
</div>
